import React from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import { Tooltip } from 'antd';
import Zcon from '@cbd/icon';
import ItemTypes from './ItemTypes';
import { getItemByType } from '../FormItemDeal';
import styles from './DropItem.less';

const cardSource = {
  beginDrag(props) {
    props.changeAddStatus(false);
    return {
      id: props.id,
      originalIndex: props.findItem(props.id).index,
    };
  },

  endDrag(props, monitor) {
    const { id: droppedId, originalIndex } = monitor.getItem();
    const didDrop = monitor.didDrop();
    if (!didDrop) {
      props.moveItem(droppedId, originalIndex, monitor.getItem());
    }
  },
};

const cardTarget = {
  canDrop() {
    return true;
  },

  hover(props, monitor) {
    const { id: draggedId } = monitor.getItem();
    const { id: overId } = props;
    if (draggedId !== overId) {
      const { index: overIndex } = props.findItem(overId, monitor.getItem());
      props.moveItem(draggedId, overIndex, monitor.getItem());
    }
  },
};

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
  connectDragPreview: connect.dragPreview(),
}))
export default class DropItem extends React.Component {

  handleDelete = (e, item) => {
    e.preventDefault();
    e.stopPropagation();
    const { handleDelItem } = this.props;
    if (handleDelItem instanceof Function) handleDelItem(item);
  }

  handleIClick = (e, item) => {
    e.preventDefault();
    e.stopPropagation();
    const { handleItemClick } = this.props;
    if (handleItemClick instanceof Function) handleItemClick(item);
  }

  render() {
    const {
      text,
      isDragging,
      connectDragSource,
      connectDropTarget,
      connectDragPreview,
      hidden,
      item,
      activeId,
    } = this.props;
    const opacity = isDragging ? 0 : 1;
    // const smallSize = isDragging ? styles.small_size : '';
    // console.log(smallSize);
    return (
      connectDragSource &&
      connectDropTarget &&
      connectDragSource(
        connectDropTarget(
          <div
            className={`${styles.drop_item} ${activeId === item.id ? styles.drop_item_active : ''} item_hover_hidden`}
            style={{ opacity, visibility: hidden ? 'hidden' : 'visible' }}
            onClick={(e) => this.handleIClick(e, item)}
          >
            <div className={styles.item_top}>
              {connectDragPreview(
                <span className={`${styles.item_title}`}>{text}</span>
              )}
              <span
                className={`${styles.delete} item_delete_hidden`}
                onClick={(e) => this.handleDelete(e, item)}
              >
                <Tooltip placement="top" title='删除'>
                  <Zcon type="delete-o" />
                </Tooltip>
              </span>
            </div>
            {getItemByType(item, true)}
          </div>
        ),
      )
    );
  }
}
